<template>
<div class="box">
  <a-typography-title :level="5" class="title">名称：{{viewData.name !== null ? viewData.name :'未命名'}}</a-typography-title>
  <a-space direction="vertical" style="gap:0">
    <a-typography-text><a-typography-text strong>其他名称：</a-typography-text>
      {{ viewData.names.length > 0 ? viewData.names.toString() : '无'}}
    </a-typography-text>
    <a-typography-text :style="{ display: `${viewData.country === null ? 'none':'' }`}">
      <a-typography-text strong>国家：</a-typography-text>{{checkCountry(viewData.country) }}
    </a-typography-text>
  </a-space>
  
  <div>
    <a-space direction="vertical" style="gap:0">
      <a-typography-text>
        <a-typography-text strong>颜色值：</a-typography-text>
        rgb() hex:
      </a-typography-text>
      <a-typography-text strong>描述：</a-typography-text>
      <a-typography-text class="indent">{{viewData.describe !== null ? viewData.describe : "暂无描述信息" }}</a-typography-text>
      <a-typography-text :style="{display: `${viewData.solarTerms!==null ? '':'none'}`}">
        <a-typography-text strong>二十四节气：</a-typography-text>
        {{viewData.solarTerms}}
      </a-typography-text>
      <a-typography-text strong :style="{display: `${viewData.poetry.length>0?'':'none'}`}">诗云：</a-typography-text>
      <a-typography-text class="indent" v-for="(item,index) in viewData.poetry" :key="index">{{item}}</a-typography-text>
    </a-space>
  </div>
</div>
</template>

<script>
import { watch,ref } from "vue";
import {checkCountry} from "@/utils/tool";

export default {
  props: ['data'],
  setup(props) {
    const viewData = ref({
          country: null,
          describe: null,
          hex: null,
          name: null,
          names: [],
          pinyin: null,
          poetry: [],
          solarTerms: null,
        })
    watch(()=> props.data,(newValue) => {
      viewData.value = {...newValue}
    })
    
    return {
      viewData,checkCountry
    }
  },
}
</script>

<style scoped lang="scss">

.title {
  margin-bottom: 0 !important;
}

.box {
  width: 70%;
  height: 100%;
  margin: 0 30px;
}

.indent {
  padding-left: 30px;
}

</style>
